'use strict';
import React, { Component } from 'react';

import {
	View,
	Image,
	ImageBackground,
	Dimensions,
	TouchableWithoutFeedback,
	StyleSheet,
	Text,
	TouchableOpacity,
	TextInput,
	ScrollView,
	TouchableHighlight,
	TouchableNativeFeedback,
	Switch,
	Modal
} from 'react-native';

var { Loading, EasyLoading } = require('react-native-easy-loading');
import ImagePicker from 'react-native-image-crop-picker';
import ModalDropdown from '../../../../core/component/comp.modal-dropdown';
import Http from '../../../../core/utils/http';
import Util from '../../../../core/utils/util';
import InitDB from '../../../../core/database/init-db';

let winWidth = Dimensions.get('window').width;//屏幕宽度
let winHeight = Dimensions.get('window').height;//屏幕高度
let backImgSrc = require('../../../../img/back_white.png');

let instance;
let navParams;

export default class ShortVideoScene extends React.Component {
	// 构造
	constructor(props) {
		super(props);


		this.state = {
			modalVisible: false,
			touxiangUrl: '',
			imageIndex: '',
		}

		instance = this;
		instance.data = ['拍照', '手机相册选择', '取消'];
		navParams = instance.props.navigation.state.params;



	}





	componentDidMount() {

		//alert(navParams.operatorType);
		let operatorType = navParams.operatorType;

		let touxiangUrl, imageIndex;


		if (operatorType === 'add') {

			if (navParams.touxiangUrl) {

				touxiangUrl = navParams.touxiangUrl;
				imageIndex = navParams.imageIndex;

			}




		} else if (operatorType === 'update') {



			Promise.resolve().then(EasyLoading.show('loading....', 10000));

			let userInfo = InitDB.getUserInfo("ACVT_CODE='userinfo' and QST_CODE='touxiang'");

			let obj = userInfo[0];
			touxiangUrl = Util.substrImageUrl(obj.OPT_VAL);
			imageIndex = Util.substrImageIndex(obj.OPT_VAL);
			Promise.resolve().then(EasyLoading.dismis());



		}


		this.setState({
			touxiangUrl: touxiangUrl,
			imageIndex: imageIndex,
		})




	}





	setProperty(name, value) {
		this.setState({
			[name]: value
		})
	}


	goBack_() {
		let navigation = this.props.navigation;

		navParams.callback(this.state.imageIndex, this.state.touxiangUrl);


		navigation.goBack()
	}


	componentWillUnmount() {
		// 请注意Un"m"ount的m是小写

		// 如果存在this.timer，则使用clearTimeout清空。
		// 如果你使用多个timer，那么用多个变量，或者用个数组来保knj存引用，然后逐个clear
		this.timer && clearInterval(this.timer);
	}

	printHello(ready) {
		var promise = new Promise(function (resolve, reject) {
			if (ready) {
				resolve("Hello");
			} else {
				reject("Good bye");
			}
		});
		return promise;
	}


	changeTouxiang(value) {

		if (value === '取消') {
			instance.setState({
				modalVisible: '0'
			})
			return;
		}

		let getImag;
		if (value === '拍照') {

			getImag = ImagePicker.openCamera({
				multiple: false,
				width: 800,
				height: 800,
				cropping: true

			});


		} else if (value === '从手机相册选择') {

			getImag = ImagePicker.openPicker({
				multiple: false,
				width: 800,
				height: 800,
				cropping: true

			});
		}


		getImag.then(images => {
			console.log(images);
			instance.setState({
				modalVisible: '0'
			})

			let fc = 'updateUserTouxiang';
			let uri = images.path;
			let imageIdex = Util.uuid();
			let photokey = '1';

			instance.setState({
				touxiangUrl: uri,
				imageIndex: imageIdex,
			})


			Http.post_image(fc, uri, imageIdex, photokey)
				.then((data) => {
					console.log(data);


					if (navParams.operatorType === 'update') {

						let empId = InitDB.getCurrentUser().empId;
						let params = { touxiang: imageIdex }
						Http.post_upload(fc, empId, params).then((data) => {

							InitDB.updateUserInfoProperty('touxiang', imageIdex + "@" + uri);


						})
					}

					console.log(images);
				})




		}).catch((err) => {
			instance.setState({
				modalVisible: '0'
			})
		})






		/*

		this.timer = setInterval(function () {
			if (instance.state.modalVisible) {
				instance.setState({
					modalVisible: false
				})
			} else {
				instance.timer && clearInterval(instance.timer);
			} 

		}, 500);

		*/

		/*this.setState({
			modalVisible: false
		})*/



	}




	render() {
		let navigation = this.props.navigation;

		console.log(this.state.touxiangUrl, "---->this.state.touxiangUrl")




		return (



			<View style={styles.body}>

				<Loading />


				<View style={{
					height: 50,
					justifyContent: 'center',
					alignItems: 'center',
					borderBottomWidth: 0.5,
					borderColor: '#DDDDDD',
					backgroundColor: 'rgb(21,20,25)',
					flexDirection: 'row',
					marginTop: 15,
				}}>

					<TouchableOpacity
						onPress={this.goBack_.bind(this)}
						style={{ height: 50, width: 50, flexDirection: "row", justifyContent: 'flex-start', alignItems: 'center', position: 'absolute', left: 0, top: 0 }}>
						<Image style={styles.back}
							resizeMode={'contain'}
							source={backImgSrc} />
					</TouchableOpacity>

					<View style={{ flex: 1, flexDirection: "row", justifyContent: "center" }}>
						<Text style={{ alignSelf: "center", color: '#ffffff', fontWeight: "bold" }} >个人头像</Text>
					</View>
					<TouchableOpacity style={{ flex: 1, flexDirection: "row", justifyContent: "flex-end" }}
						onPress={() => instance.setState({ modalVisible: '1' })}>
						<Text style={{ fontSize: 21, color: "#FFFFFF" }} >...</Text>
					</TouchableOpacity>
				</View>


				<View style={{ backgroundColor: 'rgb(1,1,1)', height: winHeight - 50, marginLeft: 0, marginRight: 0 }}>
					<Image
						style={{ width: winWidth, height: winWidth }}
						source={!this.state.touxiangUrl ? require('../../../../img/me.png') : { uri: this.state.touxiangUrl, cache: "force-cache" }} />

				</View>







				<ModalDropdown data={['拍照', '从手机相册选择']} clickEvent={instance.changeTouxiang.bind(instance)} modalVisible={this.state.modalVisible} />

			</View>
		)










	}

}




const styles = StyleSheet.create({
	body: {
		backgroundColor: '#FFF',

		height: winHeight,
		flex: 1,
	},
	topBg: {
		marginLeft: 2,
		marginRight: 2,
		height: winWidth / 5 * 3,
		justifyContent: 'center',
		alignItems: 'center',
		marginBottom: 2,
		borderColor: '#DDD',
		borderWidth: 2,

	},

	loginText: {
		fontSize: 18,
		color: '#FFF',
		position: 'absolute',
		top: 10,
	},
	headImg_out: {
		justifyContent: 'center',
		alignItems: 'center',
		flex: 1,
		borderWidth: 0,
		borderColor: '#dd2c2c',
		marginLeft: 2,
		marginRight: 2,

	},
	headImg: {
		height: 100,
		width: 100,
		borderRadius: 50,


	},
	yanzhengma_viewOut: {
		height: 40,
		flexDirection: 'row',
		justifyContent: 'flex-start',
		marginLeft: 5,
		marginRight: 5,
		marginTop: 10,

	},
	yanzhengma_inputbox: {

		flex: 2,
		marginLeft: 0,
		marginRight: 10,
		marginTop: 0,
		marginBottom: 0,
		borderColor: '#DDD',
		borderRadius: 8,
		borderWidth: 1,
		flexDirection: 'row',
		justifyContent: 'center',
		alignItems: 'center',

	}

	, inputBox: {
		flexDirection: 'row',
		marginLeft: 5,
		marginRight: 5,
		marginTop: 10,
		borderColor: '#DDD',
		borderRadius: 8,
		borderWidth: 1,
		justifyContent: 'center',
		alignItems: 'center',
		height: 40
	}
	, xiayibu_view: {
		flexDirection: 'row',
		marginLeft: 5,
		marginRight: 5,
		marginTop: 5,
		borderColor: '#DDD',
		borderRadius: 15,
		borderWidth: 1,
		justifyContent: 'center',
		alignItems: 'center',
		height: 40,
		backgroundColor: '#0404F2',
	},
	loginHref_view: {
		flexDirection: 'row',
		marginLeft: 80,
		marginRight: 80,
		marginTop: 5,
		justifyContent: 'center',

	},
	icon: {
		height: 15,
		width: 15,
		marginLeft: 10,
		marginRight: 10,
	},
	inputText: {
		flex: 1,
		marginRight: 10,
	},
	inputTextYanzhengma: {
		flex: 3,
		marginRight: 3,

	},

	addIdPicBox: {
		marginLeft: 40,
		marginRight: 40,
		marginTop: 10,
	},
	addIdPic: {
		height: 80,
		width: 80,
		marginLeft: 12,
		marginTop: 6,
	},
	loginBtn: {
		height: 40,
		borderRadius: 8,
		backgroundColor: '#00F',
		marginRight: 40,
		marginLeft: 40,
		marginTop: 20,
		justifyContent: 'center',
		alignItems: 'center',
	},
	btnText: {
		fontSize: 15,
		color: '#FFF',
	},
	inputErrorView: {

		marginLeft: 60,
		marginTop: 1,
		marginBottom: 1,

	},
	inputErrorTxt: {

		color: '#DF4849'
	},
	sex: {
		flex: 1,
		flexDirection: "row",
		justifyContent: "center",
		//borderWidth:1,
		//borderColor:'#DDD',
		marginTop: 0,
		height: "100%",
		alignItems: "center",
		backgroundColor: "#E4E4E4",
	}

});

